import React from "react";
import { Button, DatePicker, Input, Tooltip } from 'antd';

import { apiPetCheckDayRecord, apiPetCheckDayRecordChart } from '@/request/dataBoard'
import '@/views/dataBoard/style/style.less'
import '@/font/iconfont.css'
import moment from 'moment';
import Card from "@/views/dataBoard/components/card.jsx"
import OnlineIncome from '@/views/dataBoard/components/IsOnlineIncomenew.jsx'
import _ from 'lodash'
class Index extends React.Component {
    state = {
        dataSource: [],
        defaultValueTime: null,
        dateType: 0,
        selectVal: "all",
        selected: {},
        startTime: moment().subtract(1, 'days').format('yyyy-MM-DD'),
        endTime: moment().subtract(1, 'days').format('yyyy-MM-DD'),
        time: '',
        chartData: {
            eventTrendList: [],
            dateList: []
        }
    }
    charts = React.createRef()
    async componentDidMount() {
        await this.getData();
        await this.getChartData();
        this.setState({
            time: moment().subtract(1, 'days').format('yyyy-MM-DD'),
        })
    }

    getData = async () => {
        let res = await apiPetCheckDayRecord({
            "type": this.state.dateType,
            "startTime": this.state.startTime,
            "endTime": this.state.endTime
        })
        let UnitDispose = (data) => {
            if (!!data) {
                if (data > 1000000) {
                    return data > 1000000 ? (data / 1000000).toFixed(2) + "百万" : data
                } else {
                    return (data > 10000 ? (data / 10000).toFixed(2) + "万" : data || 0)
                }
            } else {
                return 0
            }
        };
        if (res.code === 0) {
            let data = res.data ? res.data : []
            let dataSource = [
                {
                    top:
                        {
                            title: '鉴别主页访客数',
                            value: data.indexMemberCount,
                            explain: <div>进入到鉴别主页的访客数，包含app和小程序<br/>注：同一个账户（不区分设备）在统计时间范围内访问多次只记为一个</div>,
                            yesterday: data.indexMemberCountQoQ,
                        },
                },
                {
                    top:
                        {
                            title: '参与鉴别人数',
                            value: data.checkMemberCount,
                            explain: "参与鉴别的用户总数去重",
                            yesterday: data.checkMemberCountQoQ
                        }
                },
                {
                    top:
                        {
                            title: '鉴别参与率',
                            value: (data.checkMemberRate ? (data.checkMemberRate / 100).toFixed(2) : 0) + '%',
                            explain: "参与鉴别的用户总数去重/鉴别主页访客数去重",
                            yesterday: data.checkMemberRateQoQ
                        }
                },
                {
                    top:
                        {
                            title: '分享解锁的人数',
                            value: UnitDispose(data.lockingSharMemberCount),
                            explain: "发起解锁报告分享的用户去重",
                            yesterday: data.lockingSharMemberCountQoQ
                        }
                },
                {
                    top:
                        {
                            title: '解锁报告打开人数',
                            value: UnitDispose(data.lockingOpenMemberCount),
                            explain: "小程序打开分享解锁报告的用户去重",
                            yesterday: data.lockingOpenMemberCountQoQ
                        }
                },
                {
                    top:
                        {
                            title: '分享报告打开人数',
                            value: UnitDispose(data.reportOpenMemberCount),
                            explain: "通过小程序打开被分享者分享报告的用户去重",
                            yesterday: data.reportOpenMemberCountQoQ
                        }
                },
                {
                    top:
                        {
                            title: '注册人数',
                            value: UnitDispose(data.registerMemberCount),
                            explain: "通过宠物鉴别带来的新用户人数",
                            yesterday: data.registerMemberCountQoQ
                        }
                },
            ]

            this.setState({ dataSource })
        }
    }
    getChartData = async () => {
        let res = await apiPetCheckDayRecordChart({
            "type": this.state.dateType,
            "startTime": this.state.startTime,
            "endTime": this.state.endTime
        })
        if (res.data && res.code === 0) {
            let data = res.data;
            this.setState({
                chartData: {}
            }, () => {
                this.setState({
                    chartData: data
                })
            })
        }
    }

    onChange = (dates, dateStrings, type) => {

        if (dates) {

            let startTime = "";
            let endTime = ""
            let time = ""
            if (type == 3) {
                startTime = moment(dates).startOf('year').format('YYYY-MM-DD')
                endTime = moment(dates).endOf('year').format('YYYY-MM-DD')
                time = startTime + '~' + endTime
            }
            if (type == 2) {
                startTime = moment(dates).startOf('month').format('YYYY-MM-DD')
                endTime = moment(dates).endOf('month').format('YYYY-MM-DD')
                time = startTime + '~' + endTime
            }
            if (type == 1) {
                startTime = moment(dates).startOf('week').format('YYYY-MM-DD')
                endTime = moment(dates).endOf('week').format('YYYY-MM-DD')
                time = startTime + '~' + endTime
            }
            if (type == 0) {
                startTime = dateStrings
                endTime = dateStrings
                time = startTime
            }
            if (type == "maybe") {
                startTime = dateStrings[0]
                endTime = dateStrings[1]
                time = startTime + "~" + endTime
            }

            this.setState({
                startTime: startTime,
                endTime: endTime,
                dateType: type,
                time: time
            }, () => {
                this.getData();
                this.getChartData()
            })
        } else {
        }
    };
    open = (a) => {
        this.setState({
            defaultValueTime: null
        })
    }
    setQuery = (params) => {
        this.setState({
            selected: params
        })
    }
    changeName = (name) => {
        console.log(name)
        let chartName = ""
        switch (name) {
            case "indexMemberCount":
                chartName = "鉴别主页访客数";
                return chartName;
            case "checkMemberCount":
                chartName = "参与鉴别人数";
                return chartName;
            case "lockingSharMemberCount":
                chartName = "分享解锁的人数";
                return chartName;
            case "lockingOpenMemberCount":
                chartName = "解锁报告打开人数";
                return chartName;
            case "reportOpenMemberCount":
                chartName = "分享报告打开人数";
                return chartName;
            case "registerMemberCount":
                chartName = "注册人数";
                return chartName;
        }
    }
    // eslint-disable-next-line arrow-body-style
    disabledDate = (current) => {
        // Can not select days before today and today
        return current && current > moment().startOf('day');
    };
    render() {
        const { dataSource, time, chartData, defaultValueTime } = this.state

        return <div className={"p-layout-box configuration"}>
            <p className="realTitle">概览数据 <span>统计时间：{time}</span></p>
            <div className="realTime">
                <div className="searchBtn">
                    <div className="box" id="area">
                        <Button type="primary">年</Button>
                        <DatePicker getPopupContainer={() => document.getElementById('area')} allowClear={false} onOpenChange={this.open} picker="year" value={defaultValueTime} onChange={(a, b) => this.onChange(a, b, 3)} className="dateBtn"  ></DatePicker>
                    </div>
                    <div className="box" id="area">
                        <Button type="primary">月</Button>
                        <DatePicker getPopupContainer={() => document.getElementById('area')} allowClear={false} onOpenChange={this.open} format={'YYYY-MM'} value={defaultValueTime} picker="month" onChange={(a, b) => this.onChange(a, b, 2)} className="dateBtn"  ></DatePicker>
                    </div>
                    <div className="box" id="area">
                        <Button type="primary" >周</Button>
                        <DatePicker getPopupContainer={() => document.getElementById('area')} allowClear={false} onOpenChange={this.open} value={defaultValueTime} picker="week" onChange={(a, b) => this.onChange(a, b, 1)} className="dateBtn"  ></DatePicker>
                    </div>
                    <div className="box" id="area">
                        <Button type="primary" >日</Button>
                        <DatePicker
                            showToday={false}
                            disabledDate={this.disabledDate}
                            getPopupContainer={() => document.getElementById('area')} allowClear={false} onOpenChange={this.open} format={'YYYY-MM-DD'} defaultValue={moment().subtract(1, 'day')} onChange={(a, b) => this.onChange(a, b, 0)} className="dateBtn"  ></DatePicker>
                    </div>
                </div>
            </div>
            <div className="card-box">
                {
                    dataSource.map((v, i) => {
                        return <Card key={i} top={v.top} nowData={v.top.nowData} />
                    })
                }
            </div>
            <div style={{ marginTop: 30, fontWeight: 700, fontSize: 22 }}>指标趋势</div>
            <OnlineIncome data={chartData} name="dataBoard" setQuery={this.setQuery} changeName={this.changeName} style={{ overflow: 'auto' }} height={'500px'} width={'100%'} />
        </div>
    }
}

export default Index;
